<template>
  <el-table
    :data="props.tableData"
    @selection-change="handleSelectionChange"
    row-key="id"
    style="width: 100%"
    max-height="400px"
  >
    <el-table-column
      type="selection"
      v-if="props.OtherConfig.showCheckBox"
      width="55"
    />
    <el-table-column
      v-for="v in props.tableHeader"
      :label="v.label"
      :prop="v.prop"
      :key="v.prop"
      :width="v.width"
    >
      <template v-if="v.type == 'slot'" #default="scope">
        <slot :name="v.prop" :rowData="scope.row"></slot>
      </template>
      <template v-if="v.type == 'image'" #default="scope">
        <img :src="scope.row.image" style="width: 80px; height: 80px" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { Timer } from "@element-plus/icons-vue";

const props = defineProps({
  tableData: {
    type: Array,
  },
  tableHeader: {
    type: Array,
  },
  OtherConfig: {
    type: Object,
  },
});

const handleEdit = (index, row) => {
  console.log(index, row);
};
const handleDelete = (index, row) => {
  console.log(index, row);
};
const handleSelectionChange = (val) => {
  console.log(val);
};

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    id: 1,
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    id: 2,
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    id: 3,
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
    id: 4,
  },
];
</script>
